<template>

	<view class="content">
		<!-- 自定义返回按钮 -->
		<view class="back-button iconfont icon-fanhui" @click="handleBack">
		</view>
		<image class="img" :src="src" mode=""></image>

		<view class="fu">
			<view class="title">
				<view class="title-top">
					正恒广场
				</view>
				<view class="title-middle">
					<view class="title-middle1">
						<text class="iconfont text1 icon-rili"></text><text class="text1">24小时</text>
					</view>
					<view class="title-middle1">
						<text class="iconfont icon-zhibeidangao text1"></text><text class="text1">洗手间</text>
					</view>
					<view class="title-middle1">
						<text class="iconfont icon-accountbook-fill text1"></text><text class="text1">购物中心</text>
					</view>
				</view>
			</view>

			<view class="workTime">
				<view class="work-left">
					<view class="work-left-titi">
						<text class="iconfont  icon-rili text1"></text> <text class="text2">营业时间：24小时</text>
					</view>
					<view class="work-left-titi">
						<text class="iconfont  icon-dianhua text1"></text> <text class="text2">超市电话：0771-3868530</text>
					</view>
					<view class="work-left-titi">
						<text class="iconfont icon-position-o text1"></text> <text class="text2">明秀西路111号正恒国际1楼
							386830</text>
					</view>
				</view>
				<view class="work-right">
					<text class="iconfont icon-dianhua ww"></text> <text class="iconfont icon-weibiaoti1 ww"></text>
				</view>
			</view>
			
			<view class="lengthImg">
				<image mode="widthFix" class="lengthImg-1" src="/static/images/mine/xq3.jpg" ></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	let src = ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')



	let handleBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;

		/* 设置内容区域为相对定位，方便子元素绝对定位 */
		.back-button {
			position: fixed;
			/* 绝对定位 */
			top: 50px;
			/* 距离顶部的距离 */
			left: 27px;
			/* 距离左侧的距离 */
			width: 40px;
			/* 按钮宽度 */
			height: 40px;
			/* 按钮高度 */
			line-height: 40px;
			/* 垂直居中图标 */
			text-align: center;
			/* 水平居中图标 */
			background-color: rgba(0, 0, 0, 0.5);
			/* 半透明背景色 */
			border-radius: 50%;
			/* 圆形按钮 */
			color: #fff;
			/* 图标颜色 */
			font-size: 20px;
			/* 图标大小 */
			z-index: 999;
			/* 确保按钮在其他内容之上 */
		}

		.img {
			width: 100%;
			height: 280px;
		}

		.fu {
			border-radius: 20px 20px 0 0;
			width: 100%;
			position: absolute;
			box-sizing: border-box;
			// left: 10px;
			background-color: white;
			top: 90%;

			/* 确保 padding 和 border 不影响宽高 */
			.title {
				padding: 10px;
				box-sizing: border-box;
				/* 确保 padding 和 border 不影响宽高 */
				width: 100%;
				
				.title-top {
					font-size: 18px;
					font-weight: bold;
				}

				.title-middle {
					display: flex;
					margin-top: 10px;
					align-items: center;

					.title-middle1 {
						padding: 4px;
						background-color: #f3f3f3;
						margin-right: 10px;

						.text1 {
							font-size: 12px;
							color: #717171;
							margin-right: 5px;
						}
					}
				}
			}

			.workTime {
				width: 100%;
				padding: 10px;
				display: flex;
				 box-sizing: border-box; /* 确保 padding 和 border 不影响宽高 */
				// justify-content: center;
				align-items: center;

				.work-left {
					width: 75%;

					.work-left-titi {
						.text1 {
							font-size: 12px;
							margin-right: 10px;
							color: #a0a0a0;
						}

						.text2 {
							font-size: 12px;
							margin-right: 10px;
						}
					}
				}

				.work-right {
					display: flex;
					justify-content: center;
					align-items: center;
					justify-content: space-between;
					padding-left: 10px;
					padding-right: 20px;
					width: 25%;

					.ww {
						display: flex;
						/* 按钮宽度 */
						height: 30px;
						/* 按钮高度 */
						width: 30px;
						line-height: 30px;
						align-items: center;
						justify-content: center;
						/* 垂直居中图标 */
						text-align: center;
						/* 水平居中图标 */
						background-color: rgba(221, 221, 221, 0.5);
						/* 半透明背景色 */
						border-radius: 50%;
						color: black;
						/* 圆形按钮 */
						// color: #fff;
						/* 图标颜色 */
						font-size: 20px;
						// margin-right: 20px;
						// padding: 10px;
					}
				}
			}
			
			.lengthImg{
				.lengthImg-1{
					width: 100%;
					// height: 100%;
				}
			}
			
		}
	}
</style>